﻿@model SmartAdmin.WebUI.Data.Models.Tenant
@{
  /**/
  ViewData["Title"] = "租户管理";
  ViewData["PageName"] = "tenants_index";
  ViewData["Heading"] = "<i class='fal fa-users text-primary'></i>  租户管理";
  ViewData["Category1"] = "系统管理";
  ViewData["PageDescription"] = "";
}
@section HeadBlock {
  <link href="~/js/easyui/themes/insdep/easyui.css" rel="stylesheet" asp-append-version="true" />
}

<div class="row">
  <div class="col-lg-12 col-xl-12">
    <div id="panel-1" class="panel">
      <div class="panel-hdr">
        <h2>
          租户管理
        </h2>
        <div class="panel-toolbar">
          <button class="btn btn-panel bg-transparent fs-xl w-auto h-auto rounded-0" data-action="panel-collapse" data-toggle="tooltip" data-offset="0,10" data-original-title="Collapse"><i class="fal fa-window-minimize"></i></button>
          <button class="btn btn-panel bg-transparent fs-xl w-auto h-auto rounded-0" data-action="panel-fullscreen" data-toggle="tooltip" data-offset="0,10" data-original-title="Fullscreen"><i class="fal fa-expand"></i></button>
        </div>

      </div>
      <div class="panel-container enable-loader show">
        <div class="loader"><i class="fal fa-spinner-third fa-spin-4x fs-xxl"></i></div>
        <div class="panel-content py-2 rounded-bottom border-faded border-left-0 border-right-0  text-muted bg-faded bg-subtlelight-fade">
          <div class="row no-gutters align-items-center">
            <div class="col">
              <!-- 开启授权控制请参考 @@if (Html.IsAuthorize("Create") -->
              <div class="btn-group btn-group-sm">
                <button name="searchbutton" class="btn btn-default"> <span class="fal fa-search mr-1"></span> 刷新 </button>
              </div>
              <div class="btn-group btn-group-sm">
                <button name="registbutton" class="btn btn-default"> <span class="fal fa-plus mr-1"></span> 注册新租户 </button>
              </div>
              <div class="btn-group btn-group-sm">
                <button name="deletebutton" disabled class="btn btn-default"> <span class="fal fa-times mr-1"></span> 删除 </button>
              </div>
              <div class="btn-group btn-group-sm">
                <button name="savebutton" disabled class="btn btn-default"> <span class="fal fa-save mr-1"></span> 保存 </button>
              </div>
              <div class="btn-group btn-group-sm">
                <button name="cancelbutton" disabled class="btn btn-default"> <span class="fal fa-ban mr-1"></span> 取消 </button>
              </div>


            </div>

          </div>

        </div>
        <div class="panel-content">
          <div class="table-responsive">
            <table id="tenant_datagrid"></table>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

<!-- END MAIN CONTENT -->

@section ScriptsBlock {
  <script src="~/js/dependency/moment/moment.js" asp-append-version="true"></script>
  <script src="~/js/easyui/jquery.easyui.min.js" asp-append-version="true"></script>
  <script src="~/js/easyui/plugins/datagrid-filter.js" asp-append-version="true"></script>
  <script src="~/js/easyui/jquery.easyui.component.js" asp-append-version="true"></script>
  <script type="text/javascript">
    class tenant  {
      constructor() {
        this.item = null;
        this.editIndex = undefined;
        this.init();
      }
      init() {
        this.$dg = $('#tenant_datagrid').datagrid({
          rownumbers: true,
          checkOnSelect: false,
          selectOnCheck: false,
          idField: 'Id',
          sortName: 'Id',
          sortOrder: 'desc',
          remoteFilter: true,
          singleSelect: false,
          method: 'get',
          onClickCell: (index, field) => {
            this.item = this.$dg.datagrid('getRows')[index];
            const _actions = ['action', 'ck'];
            if (!true || $.inArray(field, _actions) >= 0) {
              return;
            }
            if (this.editIndex !== index) {
              if (this.endEditing()) {
                this.$dg.datagrid('selectRow', index)
                  .datagrid('beginEdit', index);
                this. hook = true;
                this.editIndex = index;
                const ed = this.$dg.datagrid('getEditor', { index: index, field: field });
                if (ed) {
                  ($(ed.target).data('textbox') ? $(ed.target).textbox('textbox') : $(ed.target)).focus();
                }
              } else {
                this.$dg.datagrid('selectRow', index);
              }
            }
          },
          pagination: true,
          clientPaging: false,
          striped: true,
          onBeforeLoad: function () {
            $('.enable-loader').removeClass('enable-loader')
          },
          onLoadSuccess: () => {
            this.editIndex = undefined;
            this.$deletebutton.prop('disabled', true);
            this.$savebutton.prop('disabled', true);
            this.$cancelbutton.prop('disabled', true);
          },
          onCheck: () => {
            this.$deletebutton.prop('disabled', false);
          },
          onUncheck: () => {
            const checked = this.$dg.datagrid('getChecked').length > 0;
            this.$deletebutton.prop('disabled', !checked);
          },
          onSelect: (index, row) => {
            this.item = row;
          },
          onBeginEdit: (index, row) => {
            //const editors = $(this).datagrid('getEditors', index);
          },
          onEndEdit: (index, row) => {

          },
          onBeforeEdit: (index, row) => {
            row.editing = true;
            this.editIndex = index;
            this.$deletebutton.prop('disabled', false);
            this.$savebutton.prop('disabled', false);
            this.$cancelbutton.prop('disabled', false);
            this.$dg.datagrid('refreshRow', index);
          },
          onAfterEdit: (index, row) => {
            row.editing = false;
            this.editIndex = undefined;
            this.$dg.datagrid('refreshRow', index);
          },
          onCancelEdit: (index, row) => {
            row.editing = false;
            this.editIndex = undefined;
            this.$deletebutton.prop('disabled', true);
            this.$savebutton.prop('disabled', true);
            this.$cancelbutton.prop('disabled', true);
            this.$dg.datagrid('refreshRow', index);
          },
          columns: [[
            { field: 'ck', checkbox: true },
            {
              field: 'Name',
              title: '<span class="text-danger">*</span>租户名称',
              width: 150,
              sortable: true,
              resizable: true,
              editor: {
                type: 'textbox',
                options: { prompt: '租户名称', required: true, validType: 'length[0,50]' }
              },
            },
            {
              field: 'Description',
              title: '描述',
              width: 150,
              sortable: true,
              resizable: true,
              editor: {
                type: 'textbox',
                options: { prompt: '描述', required: false, validType: 'length[0,128]' }
              },
            },
            {
              field: 'ConnectionStrings',
              title: '数据库连接',
              width: 320,
              sortable: true,
              resizable: true,
              editor: {
                type: 'textbox',
                options: { prompt: '数据库连接字符串', multiline: true, required: false, validType: 'length[0,500]' }
              },
            },
            {
              field: 'Disabled',
              title: '是否禁用',
              width: 100,
              sortable: true,
              resizable: true,
              formatter: checkboxformatter,
              editor: {
                type: 'checkboxeditor'
              }
            }


          ]]
        })
          .datagrid('enableFilter', [
            {
              field: 'Disabled',
              type: 'booleanfilter'
            }])
          .datagrid('load', '/Tenants/GetData');
        this.$searchbutton = $('button[name="searchbutton"]');
        this. $registbutton = $('button[name="registbutton"]');
        this. $deletebutton = $('button[name="deletebutton"]');
        this. $savebutton = $('button[name="savebutton"]');
        this. $cancelbutton = $('button[name="cancelbutton"]');

        document.addEventListener('panel.onfullscreen', () => {
          setTimeout(() => {
            this.$dg.datagrid('resize');
          }, 200)
        });
        this.$searchbutton.on('click', this.reloadData.bind(this));
        this.$registbutton.on('click', this.append.bind(this));
        this.$deletebutton.on('click', this.remove.bind(this));
        this.$savebutton.on('click', this.acceptChanges.bind(this));
        this.$cancelbutton.on('click', this.rejectChanges.bind(this));
      }

      reloadData() {
        this.$dg.datagrid('unselectAll');
        this.$dg.datagrid('uncheckAll');
        this.$dg.datagrid('reload');
      };
      append() {
        this.item = { Disabled: false };
        if (this.endEditing()) {
          //对必填字段进行默认值初始化
          this.$dg.datagrid('insertRow',
            {
              index: 0,
              row: this.item
            });
          this.editIndex = 0;
          this.$dg.datagrid('selectRow', this.editIndex)
            .datagrid('beginEdit', this.editIndex);
          this.hook = true;
        }
      };
      remove() {
        const rows = this.$dg.datagrid('getChecked');
        if (rows.length > 0) {
          const id = rows.filter(item => item.Id != null).map(item => {
            return item.Id;
          });
          $.messager.confirm('确认', `你确定要删除这 <span class='badge badge-icon position-relative'>${id.length}</span> 个租户?`, result => {
            if (result) {
              $.post('/Tenants/DeleteChecked', { id: id })
                .done(response => {
                  if (response.success) {
                    toastr.success('删除成功', '确认', { timeOut: 2000 });
                    this.reloadData();
                  } else {
                    $.messager.alert('错误', response.err, 'error');
                  }
                })
                .fail((jqXHR, textStatus, errorThrown) => {
                  //console.log(errorThrown);
                  $.messager.alert('失败', errorThrown, 'error');
                });
            }
          });
        } else {
          $.messager.alert('提示', '请选择要删除的租户');

        }
      };
      acceptChanges() {
        if (this.endEditing()) {
          if (this.$dg.datagrid('getChanges').length > 0) {
            //debugger
            const inserted = this.$dg.datagrid('getChanges', 'inserted').map(item => {
              item.TrackingState = 1;
              return item;
            });
            const updated = this.$dg.datagrid('getChanges', 'updated').map(item => {
              item.TrackingState = 2
              return item;
            });
            const deleted = this.$dg.datagrid('getChanges', 'deleted').map(item => {
              item.TrackingState = 3
              return item;
            });
            //过滤已删除的重复项
            const changedarray = inserted.concat(updated.filter(item => {
              return !deleted.includes(item);
            })).concat(deleted);
            //console.log(changedarray);
            $.post('/Tenants/SaveData', { tenant: changedarray })
              .done(response => {
                //console.log(response);
                if (response.success) {
                  toastr.success('保存成功');
                  this.$dg.datagrid('acceptChanges');
                  this.reloadData();
                  this.hook = false;
                } else {
                  $.messager.alert('错误', response.err, 'error');
                }
              })
              .fail((jqXHR, textStatus, errorThrown) => {
                $.messager.alert('异常', `${jqXHR.status}: ${jqXHR.statusText} `, 'error');
              });
          }
        }
      };
      rejectChanges() {
        this.$dg.datagrid('rejectChanges');
        this.editIndex = undefined;
        this.hook = false;
      };
      endEditing() {
        if (this.editIndex === undefined) {
          return true;
        }
        if (this.$dg.datagrid('validateRow', this.editIndex)) {
          this.$dg.datagrid('endEdit', this.editIndex);
          return true;
        } else {
          const invalidinput = $('input.validatebox-invalid', this. $dg.datagrid('getPanel'));
          const fieldnames = invalidinput.map((index, item) => {
            return $(item).attr('placeholder') || $(item).attr('id');
          });
          $.messager.alert('提示', `${Array.from(fieldnames)} 输入有误.`, 'error');
          return false;
        }
      };
    };

    class tenantdetail extends tenant {
      constructor() {
        super()
        this.initeditform()
      }
      initeditform() {
        console.log(this);
      }
    }
    $(() => {
      var mytenant = new tenantdetail();
      console.log(mytenant);
    })
     
    
  
    
  </script>

}

